<!-- 编辑收货地址 -->
<template>
    <div class="navTop addressList">
        <van-nav-bar :title="title" left-arrow fixed class="loginNav" @click-left="onClickLeft"/>

        <van-cell-group custom-class="cell" :border="false">
            <van-field label="收货人姓名" value="123"/>
            <van-field label="手机号码" value="123"/>
            <van-field label="所在地区" :value="citys" is-link readonly @tap='show=true'/>
            <van-field type="textarea" autosize value="123" placeholder="详细地址：如道路、门牌号、小区、楼栋号、单元室等"/>
        </van-cell-group>
        <div class="radio">
          <checkbox-group>
              <label>
                  <checkbox value="cb" checked="true" color="rgb(253,68,78)" style="transform:scale(0.8)"/>设置为默认地址
              </label>
          </checkbox-group>
        </div>

        <div class="btnBox">
          <button class="primary">确定</button>
        </div>

        <van-popup :show="show" position="bottom" @close="show=false">
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onPicker"
          />
        </van-popup>
    </div>
</template>

<script>
const citys = {
  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州'],
  '福建': ['福州', '厦门', '莆田', '三明', '泉州']
};
export default {
    components: {},
    data() {
        return {
          title:'添加收货地址',
          citys:'',
          show:false,
           columns: [
              {
                values: Object.keys(citys),
                className: 'column1'
              },
              {
                values: citys['浙江'],
                className: 'column2',
                // defaultIndex: 2
              }
            ]
        };
    },
    onLoad(option) {
      if(option.edit == 1){
        this.title = "编辑收货地址"
      }
    },
    methods: {
        onClickLeft() {
            uni.navigateBack();
        },
        onChange(e){
          console.log(e)
        },
        onPicker(event) {
          const { picker, value, index } = event.detail;
          this.citys = value.join()
          this.show=false
        },
        setAddress(){

        }
    }
};
</script>
<style lang='less' scoped>
.addressList {
    background: #f5f5f5;
    min-height: 100vh;
}
.cell{
  margin-top: 20upx;
  .van-cell__title{color: #979797}
}

.radio{
  padding: 30upx
}
</style>